import {css} from "@emotion/css";
import {Slider, Space, Typography} from "antd";
import {motion} from "framer-motion";
import {useState} from "react";

const CardCss = css`
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 8px;
    cursor: pointer;
`

const FrameMotion = () => {
    const [demo1X, setDemo1X] = useState(0)
    const [demo1Scale, setDemo1Scale] = useState(1)


    return (
        <div className={"flex flex-col gap-20 mt-10 h-2/3 overflow-scroll"}>
            <Space className={"w-1/2"} direction={"vertical"} align={"start"}>
                <Typography.Title level={3} id={"demo-1"}>Demo1</Typography.Title>
                <motion.div className={[CardCss, "m-10"].join(" ")} animate={{
                    transformOrigin: "left",
                    transform: `scale(${demo1Scale}) translateX(${demo1X}px)`,
                    // transform: `translateX(${demo1X}px)`,
                }}/>
                <Space>
                    <Typography.Text>left</Typography.Text>
                    <Slider className={"w-[200px]"} value={demo1X} onChange={v => setDemo1X(v)}/>
                </Space>
                <Space>
                    <Typography.Text>scale</Typography.Text>
                    <Slider className={"w-[200px]"} min={1} max={1.3} step={0.01} value={demo1Scale}
                            onChange={v => setDemo1Scale(v)}/>
                </Space>
            </Space>
            <Space direction={"vertical"}>
                <Typography.Title level={3} id={"demo-2"}>Demo2</Typography.Title>
                <Space className={"m-10"}>
                    <motion.div
                        className={[CardCss, "ml-20"].join(" ")}
                        animate={{
                            scale: [1, 2, 2, 1, 1],
                            rotate: [0, 0, 180, 180, 0],
                            borderRadius: ["0%", "0%", "50%", "50%", "0%"]
                        }}
                        transition={{
                            duration: 2,
                            // ease: "easeInOut",
                            repeatDelay: 1,
                            repeat: Infinity,
                        }}
                    />

                    <motion.div
                        className={[CardCss, "ml-20"].join(" ")}
                        animate={{
                            x: [null, 100, 0, 20],
                        }}
                        transition={{
                            duration: 2,
                            repeatDelay: 1,
                            repeat: Infinity,
                            times: [0, 0.2, 2], // 设置每个帧的时长
                        }}
                    />
                </Space>
            </Space>
            <Space direction={"vertical"}>
                <Typography.Title level={3}>Demo3</Typography.Title>
                {
                    Array.from(Array(4).keys()).map(() => {
                        return (
                            <motion.div className={CardCss}
                                        initial={{
                                            opacity: 0
                                        }}
                                        whileHover={{
                                            background: "#ff0000"
                                        }}
                                        whileInView={{
                                            opacity: [0, 1],
                                            transform: "translateX(200px)"
                                        }}
                                        transition={{
                                            duration: .4
                                        }}
                            />
                        )
                    })
                }
            </Space>
        </div>
    );
};

export default FrameMotion;
